<template>
  <div style="margin-right: 5px; margin-bottom: 5px;"> <!-- section -->
    <div v-if="sec.id !== 0" class="inline-block"> <!-- switch button -->
      <el-button plain type="success" @click="switchRelation">{{ relation }}</el-button>
    </div>
    <div v-if="sec.id !== 0" class="inline-block" style="width: 110px;"> <!-- dropdown list -->
      <el-select v-model="sec.condition" @change="change">
        <el-option v-for="item in options" :key="item.value" v-model="item.value" :label="item.label"></el-option>
      </el-select>
    </div>
    <div v-else class="inline-block" style="width: 171px;"> <!-- dropdown list -->
      <el-select v-model="sec.condition" @change="change">
        <el-option v-for="item in options" :key="item.value" v-model="item.value" :label="item.label"></el-option>
      </el-select>
    </div>
    <div class="inline-block" style="width: 200px;"> <!-- value -->
      <el-input-number :controls="false" v-model="sec.value" @change="change"></el-input-number>
    </div>
    <div class="inline-block"> <!-- add button or delete button -->
      <el-button v-if="sec.id === 0" circle icon="el-icon-plus" plain type="success" @click="addCondition"></el-button>
      <el-button v-else circle icon="el-icon-minus" plain type="danger" @click="deleteCondition"></el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AnalysisSection',
  data() {
    return {
      showRelation: false,
      relation: "且",
      options: [{
        value: 0,
        label: "大于等于"
      }, {
        value: 1,
        label: "大于"
      }, {
        value: 2,
        label: "等于"
      }, {
        value: 3,
        label: "小于等于"
      }, {
        value: 4,
        label: '小于'
      }],
      sec: {}
    }
  },
  props: {
    section: {}
  },
  methods: {
    switchRelation() {
      this.relation = this.relation === "且" ? "或" : "且"
      this.sec.relation = this.sec.relation === 0 ? 1 : 0
      this.change()
    },
    change() {
      this.$emit("input", this.sec)
    },
    addCondition() {
      this.$emit("add")
    },
    deleteCondition() {
      this.$emit("delete", this.sec)
    }
  },
  created() {
    this.sec = this.section

    if (this.sec.relation === 0) {
      this.relation = "且"
    } else {
      this.relation = "或"
    }
  }
}
</script>
<style scoped>
.inline-block {
  display: inline-block;
}
</style>
